<%@page import="org.proddevplm.dao.data.Project"%>
<%@page import="org.proddevplm.dao.data.RelationMatrix"%>
<%@page import="org.proddevplm.dao.data.Resource"%>
<%@page import="org.proddevplm.dao.data.Roles"%>
<%@page import="java.util.List"%>

<%
	List allResources = (List)session.getAttribute("allResources");

	String currentRole = "";
	List relMatrixUser = (List)session.getAttribute("relMatrixUser");
	int projectId = (Integer)session.getAttribute("projectId");
	for (int index=0; index<relMatrixUser.size(); index++){
		RelationMatrix rm = (RelationMatrix)relMatrixUser.get(index);
		Project userProject = rm.getProject();
		if(userProject.getId()==projectId){
			Roles userRole = rm.getRole();
			currentRole = userRole.getRole();
		}
	}
%>

<script>

	var flag = false;
	<%if(allResources.size()!=0)%> flag = true;
	var uploadType = "fromResources";
	
	$(function(){
		$( "button" ).button();
		$("input:file").button();
		$("#uploadDiv").button();
		$("#fileStatusSelection").buttonset();
		$("#fileDevStageSelection").buttonset();
		
		$("#resourcesTable")
			.tablesorter({
				widthFixed:true,
				debug:false,
				widgets:['zebra'],
				headers:{
					0: {sorter: false},
					1: {sorter: false}
				}
			})
			if (flag){
				$("#resourcesTable")
				.tablesorterPager({container: $("#resourcesPager")})
			
				.tablesorterFilter({filterContainer: "#resourcesFilter-box",
		     		filterClearContainer: "#resourcesFilter-clear-button",
		            filterCaseSensitive:false,
		            filterColumns: [2,3,4,5,6,7,8,9,10]
				});
			}
		
		$('.helpImg').mouseover(function () {
		    $(this).css("cursor", "pointer");
		 });

		$('.helpImg').mouseout(function () {
		    $(this).css("cursor","default");	    
		 });
		
	});

    function checkOut(fileName) {
        window.open("/proddev/uploadServlet?method=download&fileName="+fileName);
    }
    
    function preUpload(){
    	$( "#dialog-fileMeta" ).dialog( "open" );
    }
    
    $( "#dialog-fileMeta" ).dialog({
		autoOpen: false,
		height: 450,
		width: 850,
		modal: true,
		buttons: {
			"Add file details": function() {
				var status = $('input:radio[name=fileStatusSelection]:checked').val();
				$("#fileStatus").val(status);
				var stage = $('input:radio[name=fileDevStageSelection]:checked').val();
				$("#fileDevStage").val(stage);
				var comments = document.getElementById('fileCommentsSelection').value;
				$("#fileComments").val(comments);
				submitMetadata();

				$( this ).dialog( "close" );
                
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
    
    function submitMetadata(){
    	var fileName = document.getElementById('selectFile').value;
    	var status = document.getElementById('fileStatus').value;
    	var stage = document.getElementById('fileDevStage').value;
    	var comments = document.getElementById('fileComments').value;

    	
    	var arguments = "uploadType="+uploadType+"&fileName="+fileName+"&status="+status+"&stage="+stage+"&comments="+comments;
	   	ajaxCall("resourceManager", "1", arguments, submitForm);
       	
    }

    function submitForm() {
        document.forms["uploadResForm"].submit();
    }
    
    function removeResource(resName, tRow){
    	var confirmResDeletion = confirm("Do you really want to remove this Resource?");
    	if (confirmResDeletion){
    		var arguments = "resName="+resName;
			var tableRow = tRow;
			$("#"+tableRow).hide();
			ajaxCall("resourceManager", "2", arguments, null);
			alert('Resource deleted successfully');
		}
    }

</script>

<div id="pageContent" align="center" style="width:auto;">
	
	<div style="margin-top:10px; font-size:medium;">
		Resources of the project
	</div>

	<div id="quickButtons" style="width:50%; margin-top:10px; float:left; text-align:left">

		<form action="/proddev/uploadServlet" method="post"
                        enctype="multipart/form-data" name="uploadResForm">
            <div id="fakeUpDiv" style="width:50%; position:relative; float:left">
            	<input type="file" name="selectFile" id="selectFile" onchange="$('#coverUpload').val(this.value)" style="position:relative; -moz-opacity:0 ;	filter:alpha(opacity: 0); opacity: 0; z-index:2">
                <input id="coverUpload" class="regInput" type="text" style="width:100%; height:30px; position:absolute;top:0px; left:0px; z-index:1;"/>
            </div>        
            <div id="uploadDiv" onclick="preUpload()" style="width:100px; margin-left:10px; font-weight: bold; float:left">Upload</div>
            <div style="clear:both"></div>
            
        </form>
	</div>
	<div style="clear:both"></div>
	<hr/>
	
	<input type="hidden" id="fileStatus" name="fileStatus">
    <input type="hidden" id="fileDevStage" name="fileDevStage">
    <input type="hidden" id="fileComments" name="fileComments">
	
	<div align="center">
		<div id="resources" style="float:left; width:100%; margin-top:10px">
			<div style="float:right; margin-bottom:-10px; text-align:right; ">
				Search table: <input name="filter" id="resourcesFilter-box" value="" maxlength="30" size="30" type="text" style="background-color:#E6EEEE">
				<input id="resourcesFilter-clear-button" type="submit" value="Clear" style="background-color:#E6EEEE;"/>
			</div>
			<div style="clear:both;"></div>
			
			<table id="resourcesTable" class="tablesorter" style="width:100%" rules="rows" frame="hsides" bordercolor="#DBDBDB">
				<thead>
					<tr>
						<th style="text-align:center;">State</th>
						<th style="text-align:center;">Action</th>
						<th>Type</th>
						<th>File Name</th>
						<th>Version</th>
						<th>Status</th>
						<th>Author</th>
						<th>Modified by</th>
						<th>Created on</th>
						<th>Dev model stage</th>
						<th>Comments</th>
					</tr>
				</thead>
				<tbody>
					<%for(int i=0; i<allResources.size(); i++) {
						Resource res = (Resource)allResources.get(i);
						if(res.getActivityName()==null){
					%>
						<tr id="row<%=i+1%>">
							<%if(res.isLocked()) {%>
								<td style="text-align:center; height:20px"><img src="/proddev/images/lockClosed.png" alt="locked" height="20" width="20"></td>
							<%}else{ %>
								<td style="text-align:center; height:20px"><img src="/proddev/images/lockOpen.png" alt="unlocked" height="20" width="20"></td>
							<%} %>
							<td style="height:20px; text-align:center;">
								<%if(!res.isLocked()) {%>
	                                <img class="helpImg" src="/proddev/images/checkOut.png" onclick="checkOut('<%=res.getName() %>')" align="middle" width="20" height="20"/>
								<%} %>
	                            
								<%if(currentRole.equals("Project Manager")) {%>
									<img class="helpImg" src="/proddev/images/delete1.png" onclick="removeResource('<%=res.getName()%>', 'row<%=i+1%>')" align="middle" width="20" height="20"/>
								<%} %>
							</td>
							<td style="height:20px; text-align:center"><%=res.getType() %></td>
							<td style="height:20px"><%=res.getName() %></td>
							<td style="height:20px"><%=res.getVersion() %></td>
							<td style="height:20px"><%=res.getStatus() %></td>
							<td style="height:20px"><%=res.getAuthor() %></td>
							<td style="height:20px"><%=res.getModifier() %></td>
							<td style="height:20px"><%=res.getDate() %></td>
							<td style="height:20px"><%=res.getDevPhase() %></td>
							<td style="height:20px"><%=res.getDetails() %></td>
						</tr>
						<%}else if((res.getActivityName()!=null)&&(res.getStatus().equals("Approved"))){ %>
							<tr id="row<%=i+1%>">
							<%if(res.isLocked()) {%>
								<td style="text-align:center; height:20px"><img src="/proddev/images/lockClosed.png" alt="locked" height="20" width="20"></td>
							<%}else{ %>
								<td style="text-align:center; height:20px"><img src="/proddev/images/lockOpen.png" alt="unlocked" height="20" width="20"></td>
							<%} %>
							<td style="height:20px; text-align:center;">
								<%if(!res.isLocked()) {%>
	                                <img class="helpImg" src="/proddev/images/checkOut.png" onclick="checkOut('<%=res.getName() %>')" align="middle" width="20" height="20"/>
								<%} %>
	                            
								<%if(currentRole.equals("Project Manager")) {%>
									<img class="helpImg" src="/proddev/images/delete1.png" onclick="removeResource('<%=res.getName()%>', 'row<%=i+1%>')" align="middle" width="20" height="20"/>
								<%} %>
							</td>
							<td style="height:20px; text-align:center"><%=res.getType() %></td>
							<td style="height:20px"><%=res.getName() %></td>
							<td style="height:20px"><%=res.getVersion() %></td>
							<td style="height:20px"><%=res.getStatus() %></td>
							<td style="height:20px"><%=res.getAuthor() %></td>
							<td style="height:20px"><%=res.getModifier() %></td>
							<td style="height:20px"><%=res.getDate() %></td>
							<td style="height:20px"><%=res.getDevPhase() %></td>
							<td style="height:20px"><%=res.getDetails() %></td>
						</tr>
						<%}
						} %>
	
				</tbody>
	
			</table>
			<div id="resourcesPager" class="pager" style="float:right; margin-top:-10px">
				<form>
					<img src="/proddev/images/tablePager/first.png" class="first" width="20" height="20" />
					<img src="/proddev/images/tablePager/previous.png" class="prev" width="20" height="20" />
					<input type="text" class="pagedisplay" style="text-align:center; width:40px; height:20px; background-color:#E6EEEE"/>
					<img src="/proddev/images/tablePager/next.png" class="next" width="20" height="20" />
					<img src="/proddev/images/tablePager/last.png" class="last" width="20" height="20" />
					<select class="pagesize" style="height:20px;">
						<option SELECTED value="5">set paging</option>
						<option value="5">5 per page</option>
						<option value="10">10 per page</option>
						<option value="20">20 per page</option>
						<option value="30">30 per page</option>					
					</select>
				</form>
			</div>	
			<div style="clear:both"></div>
		</div>
	</div>
	<div style="clear:both"></div>
	
	<div id="dialog-fileMeta" title="Add metadata for the file" style="font-family:verdana; font-size:small; display:none">
		<p>Please add auxiliary information about the file</p>

		<form name="addFileMetadata" method="post">
			
			<fieldset>
				<div style="font-weight:bold;">Choose file status</div>
				<div id="fileStatusSelection" style="width:98%; margin-top: 10px">
					<input type="radio" name="fileStatusSelection" id="inWork" value="In work"/><label for="inWork"><b>In work</b></label>
					<input type="radio" name="fileStatusSelection" id="underReview" value="Under review"/><label for="underReview"><b>Under Review</b></label>
					<input type="radio" name="fileStatusSelection" id="approved" value="Approved"/><label for="approved"><b>Approved</b></label>			
				</div>
				
				<div style="font-weight:bold; margin-top:20px">Select the development stage</div>
				<div id="fileDevStageSelection" style="margin-top:10px; font-size:x-small;">
					<input type="radio" name="fileDevStageSelection" id="analysisStage" value="Analysis Stage"/><label for="analysisStage"><b>Analysis Stage</b></label>
					<input type="radio" name="fileDevStageSelection" id="designConstraints" value="Design Constraints"/><label for="designConstraints"><b>Design Constraints</b></label>
					<input type="radio" name="fileDevStageSelection" id="productPlanning" value="Product Planning"/><label for="productPlanning"><b>Product Planning</b></label>
					<input type="radio" name="fileDevStageSelection" id="conceptDevelopment" value="Concept Development"/><label for="conceptDevelopment"><b>Concept Development</b></label>
					<input type="radio" name="fileDevStageSelection" id="conceptEnhancement" value="Concept Enhancement"/><label for="conceptEnhancement"><b>Concept Enhancement</b></label>
					<input type="radio" name="fileDevStageSelection" id="conceptValidation" value="Concept Validation"/><label for="conceptValidation"><b>Concept Validation</b></label>
				</div>
				
				<div style="font-weight:bold; margin-top:20px">Add comments, if needed</div>
				<textarea class="regInput" rows="2" cols="40" id="fileCommentsSelection" style="margin-top:10px"></textarea>
				
				<div style="clear:both;"></div>
					
			</fieldset>
		</form>
		
	</div>

</div>